<template>
  <h2>child5组件 - mutations</h2>
  <div>num: {{ num }}</div>
  <div>
    <button @click="handleClick2">num+2</button>
    <button @click="handleClick3">num+3</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
// import { ADDNUM } from "../store/mutation-types";
export default {
  computed: mapState(["num"]),
  methods: {
    // commit可以传第二个参数就是payload载荷
    // handleClick2() {
    //   this.$store.commit(ADDNUM, { n: 2 });
    // },
    // handleClick3() {
    //   // this.$store.commit("addNum", { n: 3 });
    //   // 对象风格的提交方式, 和上面的写法是完全等价的
    //   this.$store.commit({ type: ADDNUM, n: 3 });
    // },

    // 将mutations里面的addNum函数映射成为组件自己的addNum
    ...mapMutations(["addNum"]),
    handleClick2() {
      this.addNum({ n: 2 });
    },
    handleClick3() {
      this.addNum({ n: 3 });
    },
  },
};
</script>
